<template>
  <a-row>
    <a-col :span="24">
      <a-card>
       <a-row>
         <a-col :span="8">
           <a-statistic title="总阅读数" :value="statistic.viewCount" style="margin-right: 50px" >
             <template #suffix>
               <user-outlined />
             </template>
           </a-statistic>
         </a-col>
         <a-col :span="8">
           <a-statistic title="总点赞量" :value="statistic.voteCount" >
             <template #suffix>
               <like-outlined />
             </template>
           </a-statistic>
         </a-col>
         <a-col :span="8">
           <a-statistic title="点赞率"
                        :value="statistic.voteCount / statistic.viewCount * 100"
                        :precision="2"
                        suffix="%"
                        :value-style="{ color: '#cf1322' }"/>
         </a-col>
       </a-row>
      </a-card>
    </a-col>
  </a-row>
  <br/>
  <a-row :gutter="18">
    <a-col :span="12">
      <a-card>
        <a-row>
          <a-col :span="12">
            <a-statistic title="今日阅读"  :value="statistic.viewIncrease" >
              <template #suffix>
                <user-outlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="12">
            <a-statistic title="今日点赞"  :value="statistic.voteIncrease" >
              <template #suffix>
                <like-outlined />
              </template>
            </a-statistic>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card>
        <a-row>
          <a-col :span="12">
            <a-statistic title="预计今日阅读数"  :value="statistic.todayViewIncrease" >
              <template #suffix>
                <user-outlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="12">
            <a-statistic title="预计今日阅读增长"  :value="statistic.todayViewIncreaseReteAbs"
                         :precision="2"
                         suffix="%"
                         :value-style="statistic.todayViewIncreaseRete > 0? { color: '#cf1322' } :{ color: '#3f8600' }">
              <template #prefix>
                <arrow-down-outlined v-if="statistic.todayViewIncreaseRete < 0"/>
                <arrow-up-outlined v-if="statistic.todayViewIncreaseRete > 0"/>
              </template>
            </a-statistic>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
  <br />

  <a-row>
    <a-col :span="24">
      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
      <div id="main" style="height:400px;"></div>
    </a-col>
  </a-row>
</template>

<script>
import {computed, ref} from "vue";
import axios from "axios";
import { LikeOutlined, UserOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
import * as echarts from 'echarts';

export default {
  name: "the-welcome",
  components: {
    LikeOutlined,
    UserOutlined,
    ArrowUpOutlined,
    ArrowDownOutlined
  },
  setup(){
    let statistic = ref({});

    const getStatistic = () => {
      axios.get("/ebook-snapshot/get").then((response) =>{
         const data = response.data;
         if (data.code == 200){
           let resp = data.data;
           let today, yesterday = {
             viewIncrease: 1,
             voteIncrease: 0
           };
           if (resp.length > 1){
             today = resp[1];
             yesterday = resp[0];
           } else{
             today = resp[0];
           }

           statistic.value.viewCount = today.viewCount;
           statistic.value.voteCount = today.voteCount;
           statistic.value.viewIncrease = today.viewIncrease;
           statistic.value.voteIncrease = today.voteIncrease;


           // 计算当前时间占比
           let now = new Date();
           let nowRote = (now.getHours() * 60 + now.getMinutes()) / (60 * 24);
           // 预计今天总阅读数
           statistic.value.todayViewIncrease = Math.round(today.viewIncrease / nowRote);
           // 预计今天的增长率
           statistic.value.todayViewIncreaseRete = (statistic.value.todayViewIncrease - yesterday.viewIncrease) / yesterday.viewIncrease * 100;
           statistic.value.todayViewIncreaseReteAbs = Math.abs(statistic.value.todayViewIncreaseRete);

         }
      });
    }

    const get30DayStatistic = () => {
      axios.get('/ebook-snapshot/get30').then( (resp) => {
          let data = resp.data;
          if (data.code == 200){
              initEcharts(data.data);
          }
      });
    }

    const initEcharts = (list) => {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      const xAxis = [];
      const seriesView = [];
      const seriesVote = [];

      for (let i = 0; i < list.length; i ++){
        let obj = list[i];
        xAxis.push(obj.date);
        seriesView.push(obj.viewCount);
        seriesVote.push(obj.voteCount);
      }

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['阅读数', '点赞数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [

          {
            name: '阅读数',
            type: 'line',
            smooth: 0.5,
            stack: 'Total',
            data: seriesView
          },
          {
            name: '点赞数',
            type: 'line',
            stack: 'Total',
            data: seriesVote
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }


    return{
      statistic,
      getStatistic,
      get30DayStatistic
    }
  },
  mounted() {
    this.getStatistic();
    this.get30DayStatistic();
  }
}
</script>

<style scoped>
</style>